<template>
  <a-modal
    :title="modalOpt.modalTitle"
    centered
    :mask="modalOpt.mask"
    :dialogStyle="modalOpt.dialogStyle"
    :zIndex="modalOpt.zIndex"
    :visible="modalOpt.modalVisible"
    :confirm-loading="modalOpt.confirmLoading"
    :width="modalOpt.modalWidth"
    destroyOnClose
    :footer="footer"
    @ok="closeModal"
    @cancel="closeModal"
  >
    <div class="modal-content" :style="{height:modalOpt.height,maxHeight:modalOpt.maxHeight,minHeight:modalOpt.minHeight}">
      <slot></slot>
    </div>
    <template #footer>
      <div class="btmBtn">
        <slot name="cusBtn"></slot>
        <a-button type="primary" v-if="buttonText[0]" :loading="loadings"  @click="makeSure" >{{buttonText[0]}}</a-button>
        <a-button type="primary" v-if="buttonText[1]"  @click="closeModal" >{{buttonText[1]}}</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>

export default {
  props: {
    loadings:{
      type:Boolean,
      default:false
    },
    modalOpt:{
      type:Object
    },
    footer:{
      type:String,
      default:undefined
    },
    buttonText:{
      type:Array,
      default:()=>{
        return ['确定','取消']
      }
    },
  },
  data(){
      return{
        viewModal:false,
      }
  },
  components:{
  },
  computed:{

  },

  methods:{
      makeSure(){
        this.$emit('onMakeSure')
      },
      closeModal(){
        this.$emit('closeModal')
      }
  }
}
</script>

<style scoped>
.modal-content{
    width: 100%;
    max-height:80vh;
    /* max-height: calc(90vh);; */
    overflow: scroll;
    /* border: 1px solid #eee; */
}
.btmBtn{
  width: 100%;
  text-align: center;
}
</style>